<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            padding: 0;
            overflow: hidden;
        }
        li {
            float: left;
            background-color: #2299ff;
            margin: 0 15px;
            width: 50px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            color: #fff;
            font-weight: bold;
        }

    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <script type="text/javascript">
    
        // var li = document.getElementsByTagName('li');
        // var len = li.length;
        // for(var i = 0; i < len; i ++){
        //     li[i].onclick = function() {
        //         console.log(this.innerText);
        //     }
        // }// 当li变得很多时，这种循环的方法不太好了
        // // 而且，如果后面的li的个数改变了，这种的方法还得重新循环
        

        // 高级的写法
        var ul = document.getElementsByTagName('ul')[0]; 
        ul.onclick = function(e) {
            var event = e || window.event;
            var target = event.target || event.srcElement;
            if(target !== ul){
                console.log(target.innerText);
            }
        }
    </script>
</body>
</html>